<template>
  <div class="wrap">
    <!-- v-if="!isShow" -->
    <div class="own-con">
      <img
        src="https://static.xuantong.cn/images/accumulate/mine_top_bg_im.png?x-oss-process=image/resize,w_375,h_262,m_lfit/quality,q_90"
        alt=""
      />
      <div class="person-info">
        <div class="author-img">
          <img
            src="https://static.xuantong.cn/images/shutong_photo.png?x-oss-process=image/resize,w_130,h_130,m_lfit/quality,q_90"
            alt=""
          />
        </div>
        <!-- 用v-if判断登录之后不显示这一块内容 -->
        <div class="login-con" v-if="!isShow">
          <div class="re-lo">
            <van-cell is-link @click="showPopup">登录/注册</van-cell>
            <van-popup
              v-model:show="show"
              closeable
              position="right"
              :style="{ height: '100%', width: '100%' }"
            >
              <div class="logoInfo">
                <img
                  src="	https://static.xuantong.cn/logo/logo_sel_slogn_im.png"
                  alt=""
                />
                <div class="input-con">
                  <input type="text" placeholder="微信登录" />
                  <input
                    type="text"
                    placeholder="手机号登录"
                    @click="router.push('/LoginPass')"
                  />
                </div>
                <div class="tip">
                  <p>未注册账号登录后将直接注册</p>
                  <p>我已同意并愿意遵守</p>
                  <p>海外登录</p>
                </div>
              </div>
            </van-popup>
            <p class="sign">复暄梧桐,做个学童~</p>
          </div>
        </div>
        <!-- 登录之后显示这一块内容 -->
        <div class="login-con">
          <div class="stars">
            <h4>{{ res.myInfo.nickname }}</h4>
            <p>ID{{ res.myInfo.userName }}</p>
          </div>
        </div>
      </div>
      <!-- 我的精进值 -->
      <div class="my-job">
        <div class="left-top">
          <p>我的精进值</p>
        </div>
        <div class="job-img">
          <img
            src="https://static.xuantong.cn/images/accumulate/lv/mine_grade_lv0_im.png?x-oss-process=image/resize,w_52,h_50,m_lfit/quality,q_90"
            alt=""
          />
          <img
            src="https://static.xuantong.cn/images/accumulate/name/mine_grade_name0_im.png?x-oss-process=image/resize,w_100,h_50,m_lfit/quality,q_90"
            alt=""
          />
          <p>0<small>/200</small></p>
        </div>
        <div class="up">再集200精进值,可升至 Lv1 精进</div>
        <div class="right-top">
          <img
            src="https://static.xuantong.cn/images/accumulate/mine_grade_All_illustration_im.png?x-oss-process=image/resize,w_171,h_170,m_lfit/quality,q_90"
            alt=""
          />
          <img
            src="https://static.xuantong.cn/images/accumulate/v/mine_grade_v0_im.png?x-oss-process=image/resize,w_108,h_52,m_lfit/quality,q_90"
            alt=""
          />
        </div>
      </div>
      <!-- 笔山兑换 铜板儿 -->
      <div class="my-cons">
        <div class="exchange">
          <div class="exchange-bishan">
            <div class="copper">
              <div class="copper-box">
                <div class="copper-count">
                  <b>笔山对换</b>
                  <i class="iconfont icon-yuanjing"></i>
                </div>
                <van-icon name="arrow" style="color: #ccc" />
              </div>
              <div class="level">0</div>
            </div>
          </div>
          <div class="exchange-bishan">
            <div class="copper">
              <div class="copper-box">
                <div class="copper-count">
                  <b>笔山对换</b>
                  <i class="iconfont icon-huobiduihuan"></i>
                </div>
                <van-icon name="arrow" style="color: #ccc" />
              </div>
              <div class="level">0</div>
            </div>
          </div>
        </div>
        <!-- 我的作业 -->
        <div class="my-works">
          <div class="my-tit">我的作业</div>
          <div class="label">
            <div class="tabs">
              <div class="icon">
                <img
                  src="https://static.xuantong.cn/images/my/mine_review_ic.png"
                  alt=""
                />
              </div>
              <span>已评阅</span>
            </div>
            <div class="tabs">
              <div class="icon">
                <img
                  src="https://static.xuantong.cn/images/my/mine_review_ic.png"
                  alt=""
                />
              </div>
              <span>已提交</span>
            </div>
            <div class="tabs">
              <div class="icon">
                <img
                  src="https://static.xuantong.cn/images/my/mine_review_ic.png"
                  alt=""
                />
              </div>
              <span>已晒出</span>
            </div>
          </div>
        </div>
        <!-- 我的订单 设置 -->
        <div class="list">
          <div class="list-wrapper">
            <div class="item">
              <div class="order">
                <img
                  src="https://static.xuantong.cn/points/mobile/order_ic.png"
                  alt=""
                />
                <p>我的订单</p>
              </div>
              <van-icon name="arrow" style="color: #ccc" />
            </div>
            <div class="item">
              <div class="order">
                <img
                  src="https://static.xuantong.cn/points/mobile/setting_ic.png"
                  alt=""
                />
                <p>设置</p>
              </div>
              <van-icon name="arrow" style="color: #ccc" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { getCurrentInstance, ref, reactive } from "vue";
import { useRouter, useRoute } from "vue-router";
// import { getCurrentInstance, reactive } from "vue";
const { $axios } = getCurrentInstance().appContext.config.globalProperties;
const router = useRouter();
const route = useRoute();
// 气泡弹出窗
let show = ref(false);
let showPopup = () => {
  show.value = true;
}; 
// 登录和未登录的显示与隐藏
let isShow = false; 
// 存token 
let token = "";
isShow = localStorage.getItem("token") ? true : false;
let res = reactive({
  myInfo: {},
});
$axios("/apixt/uc/api/members/myself", "GET", {
  headers: {
    "x-xt-client-info": "platform=h5;version=2.7.8",
    Authorization: localStorage.getItem("token"),
  },
}).then((data) => {
  res.myInfo = data.data;
  console.log(res.myInfo);
});
</script>

<style lang="less">
.wrap {
  height: 100vh;
  overflow-y: scroll;
  .own-con {
    position: relative;
    .person-info {
      position: absolute;
      top: 30px;
      left: 0;
      right: 0;
      padding: 20px 20px 0px 20px;
      display: flex;
      .author-img {
        width: 25%;
        img {
          width: 64px;
          height: 66px;
        }
      }
      .login-con {
        .re-lo {
          position: relative;
          .van-cell--clickable {
            background: none;
            margin-right: 60px;
            font-size: 16px;
          }
          .van-badge__wrapper {
            margin-left: 150px;
            color: #333;
          }
          .van-popup {
            .logoInfo {
              position: absolute;
              top: 180px;
              left: 50%;
              transform: translate(-50%);
              img {
                width: 140px;
                height: 77px;
                display: block;
                margin: 0 auto;
                margin-bottom: 40px;
              }
              .input-con {
                input {
                  width: 196px;
                  height: 33px;
                  text-align: center;
                  border-radius: 20px;
                  border: none;
                  &:nth-child(1) {
                    background-color: #097276;
                    margin-bottom: 20px;
                    &::-webkit-input-placeholder {
                      color: white;
                    }
                  }
                  &:nth-child(2) {
                    border: 1px solid #097276;
                    &::-webkit-input-placeholder {
                      color: #ccc;
                    }
                  }
                }
              }
              .tip {
                p {
                  font-size: 14px;
                  color: #ccc;
                  text-align: center;
                  &:nth-child(1) {
                    margin-top: 10px;
                  }
                  &:nth-child(2) {
                    margin-top: 10px;
                  }
                  &:nth-child(3) {
                    margin-top: 10px;
                    color: #097276;
                  }
                }
              }
            }
          }
          .sign {
            margin-left: 15px;
            color: #999;
            font-size: 12px;
          }
        }
        .stars {
          height: 65px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          h4 {
            margin-top: 10px;
          }
          p {
            width: 132px;
            height: 22px;
            line-height: 22px;
            background: hsla(0, 0%, 100%, 0.2);
            font-size: 10px;
            text-align: center;
            border-radius: 10px;
            color: #666;
          }
        }
      }
    }
    /* 我的精进值 */
    .my-job {
      width: 325px;
      height: 105px;
      background: #ebe0d0;
      margin: 0 auto;
      border-radius: 15px;
      position: relative;
      top: -120px; // 相对位置占空间，即便定位订上去原来的位置仍然占位，下一模块就要用margin-top:-120px;
      .left-top {
        width: 90px;
        height: 24px;
        background: #ad9174;
        border-radius: 15px 0 15px 0;
        p {
          color: #fff;
          font-size: 10px;
          text-align: center;
          line-height: 24px;
        }
      }
      .job-img {
        display: flex;
        align-items: center;
        margin: 20px 0 0 20px;
        img {
          &:nth-child(1) {
            width: 25px;
            height: 25px;
          }
          &:nth-child(2) {
            width: 40px;
            height: 20px;
            margin-left: 5px;
          }
        }
        p {
          margin-left: 5px;
          font-size: 20px;
          small {
            font-size: 12px;
          }
        }
      }
      .up {
        color: #ad8153;
        font-size: 10px;
        margin: 10px 0 0 20px;
      }
      .right-top {
        position: absolute;
        top: 0px;
        right: -15px;
        img {
          &:nth-child(1) {
            width: 85px;
            height: 85px;
          }
          &:nth-child(2) {
            width: 34px;
            height: 19px;
            position: relative;
            right: 60px;
            top: 10px;
          }
        }
      }
    }
    /* 笔山兑换 铜板儿 */
    div.my-cons {
      height: 330px;
      margin-top: -110px;
      padding: 0 20px;
      background-color: rgb(248, 247, 245);
      .exchange {
        display: flex;
        justify-content: space-between;
        margin-top: 15px;
        .exchange-bishan {
          .copper {
            width: 158px;
            height: 65px;
            background-color: #fff;
            padding: 10px;
            box-sizing: border-box;
            border-radius: 10px;
            .copper-box {
              display: flex;
              justify-content: space-between;
              .copper-count {
                i {
                  color: #ad9174;
                  margin-left: 5px;
                  font-size: 18px;
                }
              }
            }
            .level {
              margin-top: 10px;
            }
          }
        }
      }
      /* 我的作业  */
      .my-works {
        margin-top: 15px;
        background-color: #fff;
        padding: 20px 0;
        border-radius: 20px;
        .my-tit {
          margin-left: 20px;
        }
        .label {
          margin-top: 20px;
          display: flex;
          justify-content: space-around;
          align-items: center;
          .tabs {
            display: flex;
            flex-direction: column;
            align-items: center;
            .icon {
              img {
                width: 27px;
                height: 27px;
              }
            }
            span {
              font-size: 10px;
            }
          }
        }
      }
      /* 我的订单 设置 */
      .list {
        margin-top: 15px;
        background-color: #fff;
        padding: 20px 0;
        border-radius: 20px;
        .list-wrapper {
          padding: 5px 20px 5px 20px;
          box-sizing: border-box;
          .item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            .order {
              display: flex;
              align-items: center;
              img {
                width: 20px;
                height: 20px;
              }
              p {
                margin-left: 10px;
              }
            }
            &:nth-child(2) {
              margin-top: 20px;
            }
          }
        }
      }
    }
  }
}
</style>
